<template>
    <div class="box">
        <div class="fourth-box">
            <div class="f-left">
                <div class="fl-top">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline form-style">
                        <el-form-item :label="`知识点列表（${trs1.length}）`">
                        </el-form-item>
                    </el-form>
                    <div class="btn">
                            <el-button type="warning" plain></el-button>
                            <span>城市</span>
                            <el-button type="success" plain></el-button>
                            <span>其它</span>
                        </div>
                    <el-scrollbar style="height: 300px; margin-top: 15px;border: solid 1px #eee">
                        <el-card style="background: white;">
                            <el-button class="ass" never="hover" :type="getButtonType(item)" plain draggable="true" @click="addition(item, index)"
                                v-for="(item, index) in trs1" :key="index" :disabled="item.isNotUse
                                    ">{{ item.name
                                }}</el-button>
                        </el-card>
                    </el-scrollbar>
                </div>
                <!-- <div class="fl-bottom" ref="canvas" style="width: 100%; height: 100%;">
                </div> -->
                <!-- 这个地方知识个演示展示效果  不要太关注哦 -->
                <!-- <acc></acc> -->
                <!-- <button id="secret-pdf-read" @click="ttns">莎</button> -->
                <div class="fr-top">
                    <div class="m-4">
                        <span>知识体系选择</span>
                        <el-cascader v-model="value" :options="options" @change="handleChange" />
                    </div>
                    <el-table class="fr_css" :data="tableData" border style="width: 100%">
                        <el-table-column align="center" prop="name" label="知识点名称" />
                        <el-table-column align="center" fixed="right" label="操作" width="120">
                            <template #default="{ row }">
                                <el-button @click="deletes(row)" link type="primary" size="small">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="primary" @click="mants">完成</el-button>
                </div>
            </div>
            <div class="f-right">
                <div class="fr-bottom">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline form-style">
                        <div class="wordcloud-box">
                            <dragechars :tableData="tableData"></dragechars>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { ref, onMounted, watch, reactive, nextTick, toRef } from 'vue';
import {secretPdf} from '@/assets/secretpdf/secretPdf'
// import Vue from 'vue';
import { earchsinit } from './Echarts/index'
// import { Checkout } from '@/api/debris';
import { useUserStore } from '@/store/modules/Knowledge_system'
import { Multiselection, inquiry, Deaturs, tablist } from '@/api/knowledgeSystem/system'
import dragechars from './layer/diagram.vue'
import { ElMessage } from 'element-plus';
import acc from './Jiaohu.vue'
const ttns=()=>{
    // secretPdf.render({
	// 			// 渲染阅读pdf的html节点id
	// 			needNodeId:'secret-pdf-read',
	// 			// pdf解密公钥，调用后台jdk提供的接口获取
	// 			needPublicKey:'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAh9VOjO7HzdvOmMpMOMINZUfGXyVNJ0wp3TmsDPhejueUwcx2m2+sfXFrj6kmQ91ldTUB22ZJDkaLmTadqzdT8duRsDQ+z7SveYzTwNjtjJguFlsAhvT4H70GJUjhSgwlsDZAXLFhi5ICn+XoOc1gRt+Al32bUpU6vT6BM9qMRRkpPnl4Yy9uXxAVo5a1UYAZRRQkE0M993q09zeVijfnbYmAnmdBx9eaDWRdymym8+qz9eA++vIMmEosAcZDSs/vmt/oZeXRLHL953qdJsjv4+IxL/E2SaLdvseUg7ngf3uPWmi3587pJgPr5oFBZpWK4YMGYXgrxN2yY4ozEVoSGQIDAQAB',
	// 			// 文件流接口，插件使用get请求调用此接口，获取加密的pdf数据流
	// 			needPdfApi:'**************',
	// 			// 可以访问到阅读器文件夹的路径，最好是绝对路径或完整路径,以“/”结尾。如果相对路径请设置正确
	// 			// needPath:'/secretpdf/',
	// 			needPath:'reslib-web/src/assets/secretpdf',
	// 			// 限制阅读的页数，默认值为0，不限制。如果试读可以传入试读到第几页
	// 			limitPage:0,
	// 			// (可选)默认双页还是单页展示， ODD:双页，EVEN:单页。如果不传参，默认双页展示
	// 			pageMode:'EVEN',
	// 			//页面大小 auto：自动缩放 page-actual：实际大小 page-fit：适合页面 page-width：适合页宽
	// 			pageZoom:'page-fit'
	// 		});
}
//零时存储
const trs = sessionStorage.getItem('Pullas')
const trs1 = reactive(JSON.parse(trs))
//本地存储带参数
const fact = localStorage.getItem('params')
const tan = JSON.parse(fact)
console.log(tan, '2333');
console.log(trs1, '12345678');
const getButtonType = (item) => {
    return item.cate === 'n' ? 'success' : 'warning';
}
//点击完成后需要携带的参
const myst: any = reactive({
    pageNo: 1,
    pageSize: 100
})
let datalods = reactive([])
//封装数据默认显示
const DefaultDisplay = async () => {
    let sartch: any = await inquiry(myst)
    datalods.splice(0, datalods.length, ...sartch); // 使用 splice 方法替换原数组的所有内容为新的搜索结果
}
const canvas = ref<HTMLDivElement>()
// const transformedData = transformData(data);

const tableData = reactive([
])
const value = ref([])
const props = {
    expandTrigger: 'hover' as const,
}
//连级选择器
const stars = reactive([])
const initDate = async (id) => {
    let star = await Multiselection(id)
    console.log(star);
    stars.splice(0, stars.length, ...star);
    // 构建级联选择器的选项
    const buildOptions = (nodes, parentId) => {
        console.log(nodes, parentId);
        let treeNodes = [];
        nodes.forEach(node => {
            if (node.pid === parentId) {
                let treeNode = {
                    value: node.id,
                    label: node.name,
                    children: buildOptions(nodes, node.id)
                };
                treeNodes.push(treeNode);
            }
        });
        console.log(treeNodes, 'reeNodes')
        return treeNodes;
    };
    // 构建选项数据 
    options.value = buildOptions(star, 0);
}
const val = ref()
const handleChange = async (value) => {
    val.value = value
    console.log('选择器值变化:', value, tableData);
    trs1.forEach((item) => item.isNotUse = false)
    let tabdata = await tablist(val.value[0])
    if (tabdata === null || typeof tabdata === 'undefined') {
        tableData.splice(0, tableData.length);
    } else {
        tableData.splice(0, tableData.length, ...tabdata);
    }
}
initDate()
const options = ref([])
const addition = (item, index) => {
    console.log(item, index, 'item');
    //当选择框为空时点击禁止添加数据
    if (value.value.length === 0) {
        ElMessage.error('请先选择关系设置哦！')
        return;
    }
    let datadd = reactive({
        bookId: item.bookId,
        bookName: item.bookName,
        chapter: item.chapter,
        createTime: item.createTime,
        creator: item.creator,
        deleted: item.deleted,
        id: '',
        isbn: '',
        name: item.name,
        remark: item.remark,
        section: item.section,
        status: item.status,
        updateTime: item.updateTime,
        updater: item.updater,
        isNotUse: item.isNotUse
    })
    if (!tableData.includes(datadd)) {
        if (tableData.find(e => e.name == datadd.name)) {
            alert('您添加的已经存在请重新添加')
        }
        else {
            tableData.push(datadd);
            trs1[index].isNotUse = true;
        }
    }
    else {
        alert('您添加的已经存在请重新添加')
    }
}
const deletes = (row) => {
    console.log(row, 'row');
    const index = trs1.findIndex((item) => item.name === row.name)
    if (index !== -1) {
        trs1[index].isNotUse = false
    }
    const countRef = toRef(row, 'isNotUse');
    countRef.value = false;
    tableData.splice(row, 1)
}
//点击完成后数据跟新
const mants = async () => {
    try {
        let manst = await Deaturs(val.value[0], tableData)
        console.log(manst);
        if (manst) {
            alert('添加成功')
            //保存词云库的数据
        } else {
            alert('添加失败')
        }
    } catch (error) {
        console.error('请求失败', error)
    }
}               
onMounted(() => {
    if (canvas.value) {
        earchsinit(canvas.value, datalods)
    }
    DefaultDisplay()
})
watch(datalods, () => {
    if (canvas.value) {
        earchsinit(canvas.value, datalods)
    }
})
</script>

<style scoped lang="scss">
.box {
    .fourth-box {
        height: 100%;
        // align-items: center;
        .f-left {
            display: flex;
            justify-content: space-between;
            margin-right: 15px;
            .fl-top {
                flex: 1;
                margin-bottom: 10px;
                .btn{
                    margin-top: -15px;
                }
                .ass {
                    // height: 300px;
                }
            }
            .fr-top {
                flex: 1;
                margin-bottom: 10px;
                margin-left: 15px;

                // ::v-deep .el-table--border .el-table__inner-wrapper{
                //     height: 150px;
                //     margin-bottom: 30px;
                // }
                .m-4 {
                    margin-top: 35px;

                    span {
                        margin-left: -15px;
                        margin-right: 15px;

                    }
                }

                .fr_css {
                    height: 300px;
                }
            }
            .fl-bottom {
                width: 100vh;
                height: 100vw;
                background-color: #f8f9f8;
                position: fixed;
            }

            .flt-list {
                overflow-y: auto;
                height: 100px;
            }
        }
        .f-right {
            height: 100%;
            // margin-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            // align-items: center;

            .fr-bottom {
                height: 50%;

                ::v-deep(.el-textarea__inner) {
                    height: 100%;
                }

                .wordcloud-box {
                    border: 1px solid #6867694b;
                    width: 100%;
                    height: 300px;
                    display: flex;
                    justify-content: center;
                    align-content: center;
                }
            }
        }
    }
}
</style>